<template>
  <div>
    <div class="newRecomment">{{ $t('discover.xingetuijian') }}</div>
    <div class="list">
      <div class="item" v-for="(item, index) in store.homeRecommendNewSong" :key="index"
        @click="searchStore.asyncsongDetail(item.id, item, index)">
        <div class=" zuo">
          <img :src="item.album.picUrl" alt="">
          <div class="right">
            <div class="song">
              <div class="title">{{ item.name }}&nbsp;</div>
              <div class="author"> {{ item.album.name }}- {{ item.artists[0].name }}</div>
            </div>
          </div>
        </div>
        <div class="video" v-show="item.mvid != 0" @click.stop="gotoMv(item.mvid)">
          <svg t="1650361221795" class="icon" viewBox="0 0 1047 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="2769" width="16" height="16">
            <path
              d="M523.636364 1024C234.821818 1024 0 794.298182 0 512S234.821818 0 523.636364 0 1047.272727 229.701818 1047.272727 512 812.450909 1024 523.636364 1024z m0-1000.727273A495.476364 495.476364 0 0 0 23.272727 512a495.476364 495.476364 0 0 0 500.363637 488.727273A495.476364 495.476364 0 0 0 1024 512 495.476364 495.476364 0 0 0 523.636364 23.272727z"
              fill="#666666" p-id="2770"></path>
            <path
              d="M449.861818 776.843636a73.541818 73.541818 0 0 1-36.538182-8.843636 69.818182 69.818182 0 0 1-36.305454-61.672727V328.843636a69.818182 69.818182 0 0 1 36.305454-61.672727 74.007273 74.007273 0 0 1 72.843637 0l333.498182 188.276364a69.818182 69.818182 0 0 1 0 123.345454L486.167273 768a73.309091 73.309091 0 0 1-36.305455 8.843636z m0-496.407272a50.501818 50.501818 0 0 0-24.901818 6.516363 46.545455 46.545455 0 0 0-24.669091 41.890909v376.552728a46.545455 46.545455 0 0 0 24.669091 41.890909 49.570909 49.570909 0 0 0 49.570909 0L808.029091 558.545455a47.941818 47.941818 0 0 0 0-84.014546l-333.498182-187.578182a49.570909 49.570909 0 0 0-24.669091-6.516363z"
              fill="#666666" p-id="2771"></path>
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { } from "vue";
import { homeStore } from '@/store/home.js'
import { search } from '@/store/search.js'
import { musicplaycontrolStore } from "@/store/playcontrol";
import { useRouter } from 'vue-router'
const router = useRouter()
const store = homeStore()
const searchStore = search()
store.asyncGetNewRecomment()
//点击播放
let clickToPlay = (id, item, index) => {
  searchStore.asyncsongDetail(id, item, index)
}
// 点击播放mv视频
let gotoMv = (id) => {
  musicplaycontrolStore().$patch({
    pause: true
  })
  router.push(
    {
      name: 'mv',
      params: { mvid: id }
    }
  )
}
</script>

<style scoped lang="less">
.newRecomment {
  padding-top: 0.2rem;
  padding-left: 0.2rem;
  font-size: 0.3rem;
}

.list {
  padding: 0.1rem;
  padding-bottom: 1.2rem;

  .item {
    display: flex;
    align-items: center;
    margin: 0.2rem 0;
    justify-content: space-between;

    .zuo {
      display: flex;
      align-items: center;

      img {
        width: 1rem;
        height: 1rem;
        border-radius: 10px;
        margin-left: 0.1rem;
        margin-right: 0.3rem;
      }
    }

    .right {
      .song {
        .author {
          font-size: 0.2rem;
          color: gray;
        }
      }
    }
  }
}

.video {
  margin-right: 0.2rem;
}
</style>
 